<template>
    <div>
        <div style="margin: 20px 5px 10px 5px;padding: 5px;">
            <el-button size="mini" type="success" @click="openWindow('singleChild',null)" icon="el-icon-plus">录入单选</el-button>
        </div>
        <div style="margin: 5px;padding: 5px;">
            <el-table :header-cell-style="{background:'#67C23A',color:'white',fontSize:'15px'}" :data="singleList" v-loading="loading" size="mini" border stripe :height="500" >
                <el-table-column type="index" align="center" width="80px"></el-table-column>
                <el-table-column prop="chapterName" label="所属章节" align="center"></el-table-column>
                <el-table-column prop="sourced" label="来源" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.sourced == '1' ? 'success' : (scope.row.sourced == '2' ? 'warning' : 'danger')">
                            {{scope.row.sourced == '1' ? '课程试题' : (scope.row.sourced == '2' ? '面试宝典' : '企业真题')}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="companyName" label="企业名称" align="center">
                    <template slot-scope="scope">
                        {{scope.row.companyName ?  scope.row.companyName : '/' }}
                    </template>
                </el-table-column>
                <el-table-column prop="singleContent" label="题干" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-tag size="mini" style="margin-right: 5px;" :type="scope.row.status == '0' ? 'danger' :'success'">
                            {{scope.row.status == '0' ? '禁用' :'启用'}}
                        </el-tag>
                        <span>{{scope.row.singleContent}}</span>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div style="margin: 10px;text-align: center;">
            <el-pagination
                    layout="total,prev,pager,next"
                    :total="params.total"
                    :page-size="params.size"
                    :current-page="params.page"
                    :hide-on-single-page="false"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"></el-pagination>
        </div>
        <single-child ref="singleChild"></single-child>
    </div>
</template>

<script>

    import { getList } from "@/api/academic/single";

    export default {
        name: "single-index",
        components:{
            SingleChild:()=>import("@/views/academic/single-child.vue")
        },
        data(){
            return {
                singleList:[],
                loading:true,
                params:{page:1,size:10,total:0}
            }
        },
        methods:{
            handlePageChange(page){
                this.params.page = page;
                this.getSingleList(this.params);
            },
            handleSizeChange(size){
                this.params.size = size;
                this.getSingleList(this.params);
            },
            getSingleList(data){
                getList(data).then(res=>{
                    this.singleList = res.data.data.rows;
                    this.params.total = res.data.data.total;
                    this.loading = false;
                })
            },
            openWindow(name,data){
                if(data == null){
                    this.$refs[name].single = {};
                }else{
                    this.$refs[name].single = data;
                }
                this.$refs[name].value = true;
            }
        },
        created(){
            this.getSingleList(this.params);
        }
    }
</script>

<style scoped>

</style>